<script setup lang="ts">
defineProps<{
  title: string
  defaultExpanded?: boolean
}>()

const expanded = defineModel<boolean>('expanded', { default: true })
</script>

<template>
  <div class="bg-white rounded-lg shadow-md p-4 mb-4">
    <div 
      @click="expanded = !expanded"
      class="flex justify-between items-center cursor-pointer mb-2">
      <h3 class="font-medium text-gray-700">{{ title }}</h3>
      <span class="text-gray-500">
        {{ expanded ? '▼' : '▶' }}
      </span>
    </div>
    
    <div v-if="expanded" class="space-y-3">
      <slot />
    </div>
  </div>
</template>